/* eslint-disable jsx-a11y/label-has-associated-control */
import cn from "classnames";

import { Icon } from "@/ui/Icons/Icon";
import React from "react";
import cls from "./Checkbox.module.scss";

interface Props {
  id: string;
  checked: boolean;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  disabled?: boolean;
  text?: string;
  name?: string;
  isRadio?: boolean;
}

export const Checkbox: React.FC<Props> = ({
  id,
  checked,
  onChange,
  disabled,
  text,
  name,
  isRadio,
}) => {
  return (
    <div
      className={cn(cls.container, {
        [cls.container_checked]: checked,
      })}
    >
      <input
        className={cn(cls.input, {
          [cls.displayInput]: isRadio,
        })}
        type={isRadio ? "radio" : "checkbox"}
        id={id}
        checked={checked}
        onChange={onChange}
        disabled={disabled}
        name={name}
      />

      {!isRadio && (
        <label className={cls.label} htmlFor={id}>
          <Icon name="checkbox" />
        </label>
      )}
      {text && (
        <label className={cls.text} htmlFor={id}>
          {text}
        </label>
      )}
    </div>
  );
};

Checkbox.displayName = "Checkbox";
Checkbox.defaultProps = {
  disabled: false,
};
